<template>
  <div class="good-sku">
    <page-header
      v-bind="newSkuHeaderConfig"
      @searchClick="searchClick"
      @resetClick="resetClick"
    />
    <page-content
      ref="pageContentRef"
      v-bind="skuContentConfig"
      :single-btn-config="singleBtnConfig"
      @singleBtnClick="singleBtnClick"
      @confirmClick="handleConfirmClick"
      @cancelClick="handleCancelClick"
    >
      <!--      规格值列表-->
      <template #specificationValues="row">
        <specification-table
          :specification-values="row.specificationValues"
          @editClick="editClick"
          @deleteClick="deleteClick"
        />
      </template>
      <!--      新增规格值-->
      <template #formSpecificationValues>
        <specification-values-tags ref="tagsRef" />
      </template>
      <!--      规格值-->
      <template #specificationName="row">
        <el-button text size="small" type="primary"
          >{{ row[row.prop] }}
        </el-button>
      </template>
      <!--      上传图片-->
      <template #uploadImage>
        <upload-image page-name="goodSku" />
      </template>
    </page-content>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import usePageHeader from '@/hooks/use-page-header'
import { useGoodSkuStore } from '@/store'
import { storeToRefs } from 'pinia'
import SpecificationTable from './cpns/specification-table.vue'
import SpecificationValuesTags from '@/views/main/goods/goodSku/cpns/specification-values-tags.vue'
import UploadImage from '@/components/upload-image/upload-image.vue'
import PageHeader from '@/components/page-header/page-header.vue'
import PageContent from '@/components/page-content/page-content.vue'
import skuHeaderConfig from '@/views/main/goods/goodSku/config/header-config'
import skuContentConfig from '@/views/main/goods/goodSku/config/content-config'
import skuEditModalConfig from '@/views/main/goods/goodSku/config/modal-edit'
import secondAuthConfig from '@/components/page-content/modal-config/second-auth'
import skuAddModalConfig from '@/views/main/goods/goodSku/config/modal-add'
import { SingleBtns } from '@/global/constant'
import type { SingleBtnType } from '@/global/types'

const singleBtnConfig = ref()
// 初始化下拉框（商户、商品）的数据
const goodSkuStore = useGoodSkuStore()
const { merchantList } = storeToRefs(goodSkuStore)

// ======================== page-header ========================
const { pageContentRef, searchClick, resetClick } = usePageHeader()

// ===================== 商户下拉框 ==============================
// 初始化商户下拉框配置
goodSkuStore.getMerchantListAction('').then(() => {
  const merchantIdObj = skuHeaderConfig.form.items.find(
    (item) => item.prop === 'merchantId'
  )
  if (merchantIdObj) {
    merchantIdObj.options = merchantList.value
  }
})
const newSkuHeaderConfig = computed(() => {
  return skuHeaderConfig
})

// ========================== page-content =========================
// 1.点击单操作按钮
const singleBtnClick = (type: SingleBtnType) => {
  if (type === SingleBtns.Edit) {
    singleBtnConfig.value = skuEditModalConfig
  }
  if (type === SingleBtns.RowAdd || type === SingleBtns.Add) {
    singleBtnConfig.value = skuAddModalConfig
  }
  pageContentRef.value?.setModalStatus(true)
}

// 子传父
// 2.点击表单框的确定按钮
const tagsRef = ref<InstanceType<typeof SpecificationValuesTags>>()
const handleConfirmClick = (
  type: SingleBtnType,
  updateInfo: (info: any) => void
) => {
  // 给pageContent页面带去规格值参数
  if (type === SingleBtns.RowAdd || type === SingleBtns.Add) {
    const tags = tagsRef.value?.getTags()
    const valueList: any[] = []
    tags.forEach((tag) => {
      valueList.push({ name: tag, isShow: 1 })
    })
    updateInfo({ valueList })
  }

  singleBtnConfig.value = null
}
const handleCancelClick = () => {
  singleBtnConfig.value = null
}

// 3.SpecificationTable规格值列表组件传来的编辑、删除事件
const editClick = (type: SingleBtnType, row: any) => {
  pageContentRef.value?.updateSingleBtnClickState(type, row)
  singleBtnConfig.value = skuEditModalConfig
  pageContentRef.value?.setModalStatus(true)
}
const deleteClick = (type: SingleBtnType, row: any) => {
  pageContentRef.value?.updateSingleBtnClickState(type, row)
  singleBtnConfig.value = secondAuthConfig
  pageContentRef.value?.setModalStatus(true)
}
</script>

<style scoped lang="less">
.good-sku {
}
</style>
